<template>
  <div>
    <el-row>
      <div v-for="(item, index) in photographerData" :key="index"
           class="al-box-pretty">
        <UserInfoCard :user-info="item" class=""/>
      </div>
    </el-row>

    <el-row>
      <div v-for="(item, index) in modelData" :key="index"
           class="al-m-bottom-10px al-box-pretty">
        <UserInfoCard :user-info="item" class=""/>
      </div>
    </el-row>
  </div>
</template>

<script>

  import ALImage from "@/components/public/ALImage";
  import UserInfoCard from "../../../components/public/UserInfoCard";

  export default {
    name: "SideBar",
    components: {UserInfoCard},
    props: {
      dataSource1: Array,
      dataSource2: Array,
    },

    data() {
      return {
        modelData: [],
        photographerData: []
      }
    },

    mounted() {
      let _this = this;
      setTimeout(() => {
        _this.handleDataSize();
      }, 500);
    },

    methods: {
      handleDataSize(){
        this.photographerData = this.$props.dataSource1.slice(0, 2);
        this.modelData = this.$props.dataSource2.slice(0, 2);
        // console.log(this.$props.dataSource1);
        // console.log(this.$props.dataSource2);

      }
    }


  }
</script>

<style scoped>

</style>
